<template>
  <div class="login">
    <div class="card">
      <h2>登录</h2>
      <a-form ref="logInRef" :model="logInForm" name="basic" :rules="rules">
        <a-form-item name="username">
          <a-input v-model:value="logInForm.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item name="password">
          <a-input-password v-model:value="logInForm.password" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item class="verification" name="verCode">
          <a-input v-model:value="logInForm.verCode" placeholder="请输入验证码" />
          <img
            src="https://img.js.design/assets/img/64cce01c3f0955cb9ebd67c3.png#74f79d9fd65f4597186e819fe4a62018"
            alt=""
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="logInClick">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { logInStore } from "@/store/logIn";
const login = logInStore();
const route = useRoute();
const router = useRouter();
const logInForm = reactive({
  username: "admin",
  password: "123456",
  verCode: "",
});
const rules = reactive({
  username: [
    {
      required: true,
      message: "请输入用户名",
      trigger: "change",
    },
    {
      min: 3,
      max: 5,
      message: "长度应该是3到5个字符",
      trigger: "blur",
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
      trigger: "change",
    },
    {
      min: 6,
      max: 18,
      message: "长度应该是3到5个字符",
      trigger: "blur",
    },
  ],
  // verCode: [
  //   {
  //     required: true,
  //     message: "请输入验证码",
  //     trigger: "change",
  //   },
  // ],
});

const logInRef = ref();
const logInClick = () => {
  logInRef.value
    .validate()
    .then(() => {
      console.log("登录","logInClick");
      login.loginActions(logInForm).then((res) => {
        if (res == 200) {
          const redirect = route.query.redirect;
          router.push(redirect || "/dashboard");
        }
      });
    })
    .catch((error) => {
      console.log("error", error);
    });
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .card {
    width: 50rem;
    height: 45rem;
    background-color: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 0.2rem 3rem rgba(79, 79, 79, 0.1);
    padding: 4.8rem;
    box-sizing: border-box;
    h2 {
      font-size: 36px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 36px;
      color: rgba(51, 51, 51, 1);
      text-align: center;
      margin-bottom: 3rem;
    }
    .ant-form-item {
      margin-bottom: 2.3rem;
    }
    .ant-input,
    .ant-input-affix-wrapper {
      height: 54px;
      border: 1px solid rgba(214, 214, 214, 1);
    }
    :deep(.ant-input),
    .ant-input-affix-wrapper {
      background: rgba(247, 247, 247, 0.73);
      &::placeholder {
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 16px;
        color: rgba(153, 153, 153, 1);
      }
    }
    .verification {
      :deep(.ant-form-item-control-input-content) {
        display: flex;
      }
      img {
        left: 275px;
        top: 0px;
        width: 157px;
        height: 57px;
        opacity: 1;
        border-radius: 4px;
        display: flex;
        margin-left: 2.4rem;
      }
    }
    .ant-btn {
      width: 100%;
      height: 54px;
    }
  }
}
</style>
